<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />

    <!-- external links for testing only -->
    <link rel="stylesheet" href="../assets/mui/email/mui-email-styletag.css" inline />
    <link rel="stylesheet" href="../assets/mui/email/mui-email-inline.css" />
  </head>
  <body>
    <table class="mui-body" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <td>
          <center>
            <!--[if mso]><table><tr><td class="mui-container-fixed"><![endif]-->
            <div class="mui-container">
              <div class="mui-panel">
                <h1>Buttons</h1>
                <h2>Anchor-tag buttons</h2>
                <h3>Normal Buttons</h3>
                <div>
                  <a href="#" class="mui-btn">Button</a>
                  <a href="#" class="mui-btn mui-btn--primary">Button</a>
                  <a href="#" class="mui-btn mui-btn--danger">Button</a>
                  <a href="#" class="mui-btn mui-btn--dark">Button</a>
                  <a href="#" class="mui-btn mui-btn--accent">Button</a>
                </div>
                <h3>Raised Buttons</h3>
                <div>
                  <a href="#" class="mui-btn mui-btn--raised">Button</a>
                  <a href="#" class="mui-btn mui-btn--primary mui-btn--raised">Button</a>
                  <a href="#" class="mui-btn mui-btn--danger mui-btn--raised">Button</a>
                  <a href="#" class="mui-btn mui-btn--dark mui-btn--raised">Button</a>
                  <a href="#" class="mui-btn mui-btn--accent mui-btn--raised">Button</a>
                </div>
                <h3>Flat Buttons</h3>
                <div>
                  <a href="#" class="mui-btn mui-btn--flat">Button</a>
                  <a href="#" class="mui-btn mui-btn--primary mui-btn--flat">Button</a>
                  <a href="#" class="mui-btn mui-btn--danger mui-btn--flat">Button</a>
                  <a href="#" class="mui-btn mui-btn--dark mui-btn--flat">Button</a>
                  <a href="#" class="mui-btn mui-btn--accent mui-btn--flat">Button</a>
                </div>
                <h3>Button sizes</h3>
                <div>
                  <a href="#" class="mui-btn mui-btn--primary mui-btn--small">Button</a>
                  <a href="#" class="mui-btn mui-btn--primary mui-btn--large">Button</a>
                </div>
                
                <hr>
                <h3>Table-tag buttons</h3>
                <h4>Normal Buttons</h4>
                <div>
                  <table class="mui-btn"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td><a href="#">Button</a></td>
                    </tr>
                  </table>
                  <br>              
                  <table class="mui-btn mui-btn--primary"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td><a href="http://google.com">Button</a></td>
                    </tr>
                  </table>
                  <br>
                  <table class="mui-btn mui-btn--danger"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td><a href="#">Button</a></td>
                    </tr>
                  </table>
                  <br>
                  <table class="mui-btn mui-btn--dark"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td><a href="#">Button</a></td>
                    </tr>
                  </table>
                  <br>
                  <table class="mui-btn mui-btn--accent"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td><a href="#">Button</a></td>
                    </tr>
                  </table>
                </div>
                <h4>Raised Buttons</h4>
                <div>
                  <table class="mui-btn mui-btn--raised"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td align="center"><a href="#">Button</a></td>
                    </tr>
                  </table>
                  <br>
                  <table class="mui-btn mui-btn--primary mui-btn--raised"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td><a href="#">Button</a></td>
                    </tr>
                  </table>
                  <br>
                  <table class="mui-btn mui-btn--danger mui-btn--raised"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td><a href="#">Button</a></td>
                    </tr>
                  </table>
                  <br>
                  <table class="mui-btn mui-btn--dark mui-btn--raised"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td><a href="#">Button</a></td>
                    </tr>
                  </table>
                  <br>
                  <table class="mui-btn mui-btn--accent mui-btn--raised"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td><a href="#">Button</a></td>
                    </tr>
                  </table>
                </div>
                <h4>Flat Buttons</h4>
                <div>
                  <table class="mui-btn mui-btn--flat"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td><a href="#">Button</a></td>
                    </tr>
                  </table>
                  <br>
                  <table class="mui-btn mui-btn--primary mui-btn--flat"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td><a href="#">Button</a></td>
                    </tr>
                  </table>
                  <br>
                  <table class="mui-btn mui-btn--danger mui-btn--flat"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td><a href="#">Button</a></td>
                    </tr>
                  </table>
                  <br>
                  <table class="mui-btn mui-btn--dark mui-btn--flat"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td><a href="#">Button</a></td>
                    </tr>
                  </table>
                  <br>
                  <table class="mui-btn mui-btn--accent mui-btn--flat"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td><a href="#">Button</a></td>
                    </tr>
                  </table>
                </div>
                
                <h4>Large Button</h4>
                <div>  
                  <table class="mui-btn mui-btn--primary mui-btn--small"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td><a href="#">Button</a></td>
                    </tr>
                  </table>
                  <br>
                  <table class="mui-btn mui-btn--primary mui-btn--large"
                         border="0"
                         cellspacing="0"
                         cellpadding="0">
                    <tr>
                      <td><a href="#">Button</a></td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
            <!--[if mso]></td></tr></table><![endif]-->
          </center>
        </td>
      </tr>
    </table>
  </body>
</html>
